<template>
    <div>
        <el-row class="search">
            <el-col :span="24">
                <el-col :span="15">
                    <span>筛选：</span>
                    <el-select v-model="ca" @change="changeselect" placeholder="选择类型进行搜索">
                        <el-option label="已过期" value="4"></el-option>
                        <el-option label="未过期" value="3"></el-option>
                        <el-option label="满减" value="1"></el-option>
                        <el-option label="无门槛" value="2"></el-option>
                    </el-select>
                    <el-button @click="deleteoverdate"  v-show="flag" class="delete" type="primary">删除已过期</el-button>
                </el-col>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="id" label="优惠券id"> </el-table-column>
                    <el-table-column prop="name" label="商品名称"> </el-table-column>
                    <el-table-column prop="condition" label="条件"> </el-table-column>
                    <el-table-column prop="price" label="优惠金额"> </el-table-column>
                    <el-table-column prop="" label="优惠类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.parentid == 1">满减</span>
                            <span v-if="scope.row.parentid == 2">无门槛</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                    <el-button @click="deletecoupon(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                </template>
            </el-table-column> -->
                </el-table>
            </el-col>
        </el-row>

        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize" @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
import url from '../../assets/js/baseurl';
export default {
    data() {
        return {
            flag: false,
            ca: '',
            tableData: [],
            total: 0,
            pagesize: 3,
            currentPage: 1,
            id: ''
        };
    },
    mounted: async function () {
        let res = await this.$http.get(`${url.lxy}/coupon`, { params: { num: this.pagesize, page: this.currentPage } });
        this.tableData = res.data.data;
        this.total = res.data.total;
    },
    methods: {
        handleCurrentChange: async function (page) {
            let res = await this.$http.get(`${url.lxy}/coupon`, { params: { id: this.id, num: this.pagesize, page: page } });
            console.log(res);
            this.tableData = res.data.data;
            this.total = res.data.total;
        },
        deleteoverdate:async function (){
            let res  = await this.$http.delete(`${url.lxy}/coupon`);
            if(res.data.code){
                this.$message.success(res.data.msg)
            }else{
                this.$message.error(res.data.msg)
            }
        },
        changeselect: async function (val) {
            if (val == 4) {
                this.flag = true;
            }else{
                 this.flag = false;
            }
            this.id = val;
            let res = await this.$http.get(`${url.lxy}/coupon`, { params: { id: val, num: this.pagesize, page: this.currentPage } });
            this.tableData = res.data.data;
            this.total = res.data.total;
        }
        // deletecoupon: function (row) {
        //     console.log(row);
        // }
    }
};
</script>

<style scoped>
.search {
    margin-bottom: 10px;
}
.delete {
    margin-left: 10px;
}
</style>